<script setup lang="ts">
import { ref } from 'vue'
import type { SKU } from '@/api/product/sku/type.ts'

defineProps<{
  sku?: SKU
}>()

const show = ref<boolean>(false)

const setShow = (val: boolean) => {
  show.value = val
}

defineExpose({
  setShow,
})
</script>

<template>
  <el-drawer v-model="show">
    <template #header>
      <h4>商品详情</h4>
    </template>
    <template #default>
      <el-descriptions title="商品信息" :column="1" size="default" border>
        <el-descriptions-item label="名称">
          {{ sku?.skuName }}
        </el-descriptions-item>
        <el-descriptions-item label="描述">
          {{ sku?.skuDesc }}
        </el-descriptions-item>
        <el-descriptions-item label="价格">
          {{ sku?.price }}
        </el-descriptions-item>
        <el-descriptions-item label="重量">
          {{ sku?.weight }}
        </el-descriptions-item>
        <el-descriptions-item label="平台属性">
          <el-tag v-for="item in sku?.skuAttrValueList" :key="item?.id">
            {{ item?.attrName }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="销售属性">
          <el-tag v-for="item in sku?.skuSaleAttrValueList" :key="item?.id">
            {{ item?.saleAttrName }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-carousel
        type="card"
        :autoplay="false"
        trigger="click"
        indicator-position="outside"
        height="220px"
      >
        <el-carousel-item v-for="item in sku?.skuImageList" :key="item?.id">
          <img :src="item?.imgUrl" :alt="item?.imgName" />
        </el-carousel-item>
      </el-carousel>
    </template>
    <template #footer>
      <div>
        <el-button type="primary" @click="setShow(false)">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">
.el-carousel__item {
  height: 200px;
  margin-top: 20px;
  border: solid 1px var(--el-border-color);

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
